<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关于会聚</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1537426_zmse968mns.css">
    <script src="./js/rem.js"></script>
</head>
<style>
#about{width: 100%;}
#about .nav{width: 100%; padding:0.9375rem 0;}
#about .nav i{position: absolute;left: 0.9375rem;top:0.59rem;}
#about .nav i.iconfont{font-size: 1.875rem!important;}
#about .nav p{width: 4rem;font-weight: 700;}

#about .wrap{width: 100%;}
#about .wrap .nav-bgc{width: 100%;}
#about .wrap .nav-bgc img{position:relative;width: 100%;}
#about .wrap .nav-bgc .company-introduce{position: absolute;top:7.1875rem; margin:0 1.125rem;background-color: #fff;}
#about .wrap .nav-bgc .company-introduce .company-name{font-size: 1rem;font-weight: 700;text-align: center;margin-top: 2.8125rem;}
#about .wrap .nav-bgc .company-introduce .introduce-details{font-size: 0.875rem;text-indent: 2em;padding: 0.625rem 0.625rem;}
#about .wrap .nav-bgc .company-logo{position: absolute;top:5rem;width: 100%;padding: 0 1.25rem;}
#about .wrap .nav-bgc .company-logo img{border-radius:50%;width: 4.0625rem;height: 4.0625rem;}

#about .wrap .big-event{width: 100%;padding:0 1.125rem;margin-top: 11.25rem;}
#about .wrap .big-event .event-title p{font-size: 1.375rem;color:#ccc;font-weight: 500;}
#about .wrap .big-event .event-content{padding-top: 0.625rem;padding-bottom:0.625rem;border-bottom: 0.125rem solid rgba(0, 0, 0, 0.05);}
#about .wrap .big-event .event-content:nth-child(3){border-bottom: 0;}
#about .wrap .big-event .event-content .event-img{width: 40%;}
#about .wrap .big-event .event-content .event-img img{width: 100%;}
#about .wrap .big-event .event-content .event-details{width: 60%;}
#about .wrap .big-event .event-content .event-details p{padding-left: 0.625rem;}
#about .wrap .big-event .event-content .event-details p.head{text-align: center;font-size: 0.875rem;font-weight: 700;}
#about .wrap .big-event .event-content .event-details p.event-desc{font-size: 0.75rem;padding-top: 0.625rem;padding-left: 0.9375rem;}

#about .wrap .qr-code{width: 100%;padding:1.25rem 1.125rem;}
#about .wrap .qr-code img{width: 100%;}
</style>

<body>
    <div id="about">
        <div class="nav flex justify-center">
            <i class="icon iconfont iconback" @click="back"></i>
            <p>关于会聚</p>
        </div>
        <div class="wrap">
            <!-- 顶部背景 -->
            <div class="nav-bgc">
                <img src="./img/company-bgc.png" alt="">
                <div class="company-introduce">
                    <div class="company-name">
                        杭州会友科技有限公司
                    </div>
                    <p class="introduce-details">
                        杭州会友科技有限公司是一家致力于行业移动解决方案的软件公司。主要提供行业解决方案的商业策略，咨询设计，定制研发等服务。核心团队成立于2012年，现已在宁波、台州等地设立分公司和办事处，技术人员60余人，已上线项目百余款。公司秉承着“精工细作，科技会友”的创业理念，致力做行业内领先的移动应用开发服务商。
                    </p>
                </div>
                <!-- 公司logo -->
                <div class="company-logo flex justify-center">
                    <img src="./img/company-logo.png" alt="logo">
                </div>
            </div>
            <!-- 公司大事件 -->
            <div class="big-event">
                <div class="event-title">
                    <p>公司大事件</p>
                </div>
                <div class="event-content flex">
                    <div class="event-img">
                        <img src="./img/event-img.png" alt="img">
                    </div>
                    <div class="event-details">
                        <p class="head">22岁的月入过万</p>
                        <p class="event-desc">
                            会聚人力毕业一年的学员现已月入过万，会聚人力毕业一年的学员现已月入过万，会聚人力毕业一年的学员现已月入过万，
                        </p>
                    </div>
                </div>
                <div class="event-content flex">
                        <div class="event-img">
                            <img src="./img/event-img.png" alt="img">
                        </div>
                        <div class="event-details">
                            <p class="head">22岁的月入过万</p>
                            <p class="event-desc">
                                会聚人力毕业一年的学员现已月入过万，会聚人力毕业一年的学员现已月入过万，会聚人力毕业一年的学员现已月入过万，
                            </p>
                        </div>
                    </div>
            </div>
            <!-- 二维码 -->
            <div class="qr-code">
                <img src="./img/QRCode.png" alt="QRCode">
            </div>
        </div>

    </div>
</body>

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var about = new Vue({
        el: '#about',
        data: {

        },
        methods: {
            back:function(){
                window.history.back(-1); 
                window.location.href='./index.html';
            }
        },

    })
</script>

</html>